<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
		<!-- 页面內容 -->
			<view @tap="bushiyong" class="grace-flex grace-flex-vcenter grace-space-between " style="margin-top: 20rpx; width:750rpx;height:85rpx;background:rgba(255,255,255,1);">
				<text style="margin-left: 39rpx; font-size:29rpx;font-weight:400;color:rgba(61,61,61,1);">不使用抵用券</text>
				<image :src="buyouhui" style="margin-right: 20rpx; width: 30rpx;height: 30rpx;"></image>
			</view>
			
			<view v-for="(item2,index1) in dikou" :key="index1" style="margin: 10rpx auto; position: relative; background-image: url(../../static/youhuiquan.png);width: 713rpx;height: 248rpx;background-size: contain; background-repeat: no-repeat;">
				<view style="position: absolute;top: 10rpx;left: 310rpx; font-size:18rpx;font-weight:bold;color:rgba(229,0,108,1);">有效期：{{ item2.end_time }}</view>
				<view  style="text-align: center;position: absolute;left: 53rpx;top: 103rpx; width:489rpx;height:70rpx;background:rgba(223,8,22,0.21);border-radius:35rpx;">
					<text style="line-height: 70rpx; font-size:30rpx;font-weight:bold;color:rgba(229,0,108,1);">剩余可用金额：{{ item2.progress_bar_num }}元</text>
				</view>
				<image @tap="tap_shiyong(index1,item2.id)" :src="index1===quan_index? '../../static/allowance2_yixuan.png':'../../static/allowance2_shiyong.png'" style="position: absolute;top: 120rpx;left: 603rpx;width: 61rpx;height: 62rpx;"></image>
				<!-- <view style="position: absolute;top: 130rpx;left: 603rpx;width: 61rpx;height: 62rpx;background-size: contain;background-repeat: no-repeat;" :style="{backgroundImage:index1===quan_index? 'url(../../static/allowance2_yixuan.png)':'url(../../static/allowance2_shiyong.png'}"></view> -->
				<view style="font-size:16rpx;font-weight:bold;color:rgba(255,255,255,1);position: absolute;top: 180rpx;left: 560rpx;">编号：{{ item2.my_num }}</view>
			</view>
			
			<button @tap="queren()" style="position: fixed;bottom: 0; width:750rpx;height:100rpx;background:rgba(218,28,30,1);font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 100rpx;">确认</button>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				quan_id:0,
				quan_index:0,
				buyouhui:'../../static/weixuan.png',
				money:'',//云刷金额
				max:0,//最大使用金额
				dikou:[],//抵扣券列表
				
			}
		},
		onLoad:function(opt){
			this.money=opt.money;
			this.get_info_data();
			
			
		},
		methods:{
			bushiyong(){
				uni.$emit('xuanzediyongquan',{coupon_id:''})
				this.Back(1);
				
			},
			queren(){
				uni.$emit('xuanzediyongquan',{coupon_id:this.quan_id})
				this.Back(1);
			},
			tap_shiyong(index,id){
				this.quan_index=index;
				this.quan_id=id;
			},
			get_info_data(){
				var vm=this;
				vm.req.post(
				vm.lochost+'/mytrunk/mycloudbrush/getdikou',
				{money:this.money},
				{},
				function(res){
					vm.max=res.data.max;
					vm.dikou=res.data.dikou;
					vm.quan_id=vm.dikou[0].id;
				}
				)
			},
			
		},
		components:{
			gracePage
		}
	}
</script>

<style>
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
